<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>贪吃蛇</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		h2{
			margin: 20px 0px;
			letter-spacing: 10px;
			font: 900 30px/1em 华文新魏;
		}
		body{
			background: url(./Rsc/img/001.png) no-repeat;
			background-size: cover;
		}
		#main{
			width: 900px;
			/* height: 500px; */
			margin: 50px auto;
			/* border: 1px solid red; */
			text-align: center;
		}
		.map{
			width: 800px;
			height: 400px;
			background: rgb(221, 221, 221, 0.8);
			margin: 30px auto;
			border-radius: 5px;			
			position: relative;
		}
		.score{
			font: 900 20px/1em 楷体;
		}
		button{
			width: 200px;
			height: 50px;
			margin: 50px;
			border-radius: 25px;
			outline: none;
		}
	</style>
</head>
<body>
	<div id="main">
		<h2>贪吃蛇</h2>
		<div class="map"></div>
		<p class="score">得分：<span>0</span></p>
		<button type="button" id="start">开始游戏</button>
		<button type="button" id="pause">终止游戏</button>
	</div>
</body>
<script type="text/javascript">
	const map = document.querySelector('.map');
	let count_n = 0;
	//snake
	function Snake(){
		this.w = 10;
		this.h = 10;
		this.direction = 'right';
		this.score = 0;
		this.body = [
			{x:2, y:0},
			{x:1, y:0},
			{x:0, y:0}
		]
	};
	Snake.prototype.show = function(){
		for(var i = 0; i < this.body.length; i++){
			if(this.body[i].x != null){
				var x = document.createElement('div');
				//将节点保存在flag中，方便删除
				this.body[i].flag = x;
				if(i === 0){
					x.style.cssText = `width: ${this.w}px; height: ${this.h}px; position: absolute; background: red;border: 1px solid #ccc; border-left:none; box-sizing: border-box; border-radius: 50%; left:${this.body[i].x * this.w + 'px'}; top: ${this.body[i].y * this.h + 'px'}`;
				}else{
					x.style.cssText = `width: ${this.w}px; height: ${this.h}px; position: absolute; background: black;border: 1px solid #ccc; border-left:none; box-sizing: border-box; border-radius: 50%; left:${this.body[i].x * this.w + 'px'}; top: ${this.body[i].y * this.h + 'px'}`;
				}
				map.appendChild(x);
			}
		}
	}
	Snake.prototype.run = function(){
		//清除上一次的痕迹
		for(var i = this.body.length - 1; i >= 0; i--){
			if(this.body[i].flag !== null){
				map.removeChild(this.body[i].flag);
			}
		}
		//后一个div移动到前一个div的位置
		// for(var i = 1; i <= this.body.length - 1; i++){
		// 	console.log(i)
		// 	this.body[i].x = this.body[i - 1].x;
		// 	this.body[i].y = this.body[i - 1].y;
		// }
		for (var i=this.body.length-1; i>0; i--) {
		  this.body[i].x = this.body[i-1].x;
		  this.body[i].y = this.body[i-1].y;
		}
		
		//方向确认
		switch(this.direction){
			case 'up': this.body[0].y -= 1;break;
			case 'down': this.body[0].y += 1;break;
			case 'left': this.body[0].x -= 1;break;
			case 'right': this.body[0].x += 1;break;
		}
		//撞墙结算
		if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > parseInt(window.getComputedStyle(map).width) / this.w - 1 || this.body[0].y > parseInt(window.getComputedStyle(map).height) / this.h - 1){
			alert(`游戏结束,本次得分为：${this.score}`);
			clearInterval(timer);
			snake_clear();
		}
		//撞到自己
		for(var i = 4; i < this.body.length; i++){
			if(this.body[i].x == this.body[0].x && this.body[i].y == this.body[0].y){
				alert(`游戏结束,本次得分为：${this.score}`);
				clearInterval(timer);
				snake_clear();
			}
		}
		//吃到果子
		if(this.body[0].x == f.x && this.body[0].y == f.y){
			this.score += 1;
			document.querySelector(".score span").innerHTML = this.score;
			map.removeChild(document.querySelector('.foot_s'));
			f.show();
			this.body.push({x:null,y:null,flag:null});
		}
		s.show();
	}
	//food
	function Food(){
		this.w = 10;
		this.h = 10;
	}
	Food.prototype.show = function(){
		var food = document.createElement('div');
		food.setAttribute('class', 'foot_s');
		this.x = Math.floor(parseInt(window.getComputedStyle(map).width) / this.w * Math.random());
		this.y = Math.floor(parseInt(window.getComputedStyle(map).height) / this.h * Math.random());
		food.style.cssText = `width: ${this.w}px; height: ${this.h}px; position: absolute; background: red; border-radius: 50%; top: ${this.y * this.h}px; left: ${this.x * this.w}px`
		// console.log(Math.floor(parseInt(window.getComputedStyle(map).height) / this.h * Math.random()) * this.h, Math.floor(parseInt(window.getComputedStyle(map).width) / this.w * Math.random()) * this.w)
		map.appendChild(food);
	}

	//方向键绑定
	document.body.onkeydown = function(e){
		var ev = e || window.event;
		switch(ev.keyCode){
			case 38: case 87: if(s.direction != 'down'){s.direction = 'up'};break;
			case 40: case 83: if(s.direction != 'up'){s.direction = 'down'};break;
			case 37: case 65: if(s.direction != 'right'){s.direction = 'left'};break;
			case 39: case 68: if(s.direction != 'left'){s.direction = 'right'};break;
		}
	}

	var s = new Snake();
	var f = new Food();
	s.show();
	f.show();
	
	//控制区
	var start = document.querySelector('#start');
	var pause = document.querySelector('#pause');
	var timer = null;

	start.onclick = function(){
		clearInterval(timer);
		timer = setInterval('s.run()', 300);
	}
	pause.onclick = function(){
		for(var i = s.body.length - 1; i >= 0; i--){
			if(s.body[i].x != null){
				map.removeChild(s.body[i].flag);
			}
		}		
		alert(`游戏结束,本次得分为：${s.score}`);
		clearInterval(timer);
		snake_clear();
		s.show();
	}
	function snake_clear(){
		s.score = 0;
		s.direction = 'right';
		s.body = [
			{x:2, y:0},
			{x:1, y:0},
			{x:0, y:0}
		];
		console.log('e')
		document.querySelector(".score span").innerHTML = 0;
	}
</script>
</html>